<template>
    <div>
        <!--        头部-->
        <CvsHeader/>
        <div class="middle">
            <!--            左侧菜单-->
            <div class="left">
                <CvsMenu/>
            </div>
            <!--            右侧主体-->
            <div class="right">
                <router-view></router-view>
            </div>
        </div>
        <!--        底部-->
        <CvsFooter/>
    </div>
</template>

<script>
import CvsHeader from "@/components/common/CvsHeader.vue";
import CvsFooter from "@/components/common/CvsFooter.vue";
import CvsMenu from "@/components/common/CvsMenu.vue";
import {mapState} from "vuex";

export default {
    name: "CvsIndex",
    components: {
        CvsHeader,
        CvsFooter,
        CvsMenu
    },
    data() {
        return {
            // userName: ''
        }
    },

    computed: {
        ...mapState([
            'name'
        ])
    }
}
</script>

<style scoped>

.middle {
    display: flex;
}

.left {
    width: 12%;
}

/*右边*/
.right {
    display: block;
    background-color: white;
    width: 88%;
}

/*欢迎登录页*/
.wColck {
    width: 88px;
    height: 108px;
    margin: 50px;
    float: left;
}

.wFont {
    float: left;
    margin-top: 50px;
}

.wFont h2 {
    font-size: 30px;
    line-height: 50px;
    color: #0a5eb6;
}

.wFont p {
    font-size: 14px;
    line-height: 30px;
    color: #5a656c;
}
</style>
